﻿<%@ Page Title="" Language="C#" MasterPageFile="~/Shared/MasterPage.master" ValidateRequest="false" %>
<%@ Import Namespace="System.IO" %>
<%@ Register Assembly="Typps" Namespace="Typps" TagPrefix="t" %>
<script runat="server">
	protected void Page_Load(object sender, EventArgs e)
	{

	}
	protected void ImagePicker_BrowseServerRequest(object sender, EventArgs e)
	{
		//This handler fires when :
		//1) You click the Browse Server button on the Image designer dialog for~ the first time
		//2) When you use the file upload button to upload an image, and then 
		//clicking Browse server again will trigger this
		//3) This is indeed the best place to enumerate your images and it fires during pre_render phase
		//this means quite late in the page life cycle giving you a lot of time to do other things
		//such as saving your files on the server during a file upload operation *before* building
		//the nodes for the gallery.
		PopulateImageGallery((ImagePicker)sender);
	}
	void PopulateImageGallery(ImagePicker ip)
	{
		//fill our image gallery with images browsable on the server
		string imagesDirectoryPath = Server.MapPath(@"~/Editor/Images/Imagepicker/");
		/*not the best example to set titles but it's easy for demo*/
		string[] billgates ={"If you can't make it good, at least make it look good",
                                "Life is not fair, get used to it",
                                "Your most unhappy customers are your greatest source of learning",
                                "Patience is a key element of success"};
		DirectoryInfo di = new DirectoryInfo(imagesDirectoryPath);
		if (di.Exists)
		{
			ip.ImageGalleryNode.Text = di.Name;//The folder
			//Now lets add all images to this parent node so
			//it seems like this : 
			/*
				- Images
					- imageselection1.jpg
					- Image2.jpg
			 */
			FileInfo[] files = di.GetFiles();
			int index = 0;
			foreach (FileInfo file in files)
			{
				string pathToImageFile = ResolveUrl(
		string.Format(@"~/Editor/Images/Imagepicker/{0}", file.Name));
				//create a new HTreeNode
				HTreeNode tr1 = new HTreeNode();
				tr1.Text = file.Name;
				tr1.Value = pathToImageFile;
				tr1.ToolTip = billgates[index++];
				if (index == billgates.Length)
					index = 0;//recycle, we just ran out of quotes
				//add it to the root node, since we only have one folder
				ip.ImageGalleryNode.ChildNodes.Add(tr1);
			}
		}
	}
</script>
<asp:Content ID="Content1" ContentPlaceHolderID="head" runat="Server">
	<title>Typps HTML Editor using the Jquery UI dialog </title>
	<link type="text/css" href="css/ui-lightness/jquery-ui-1.8.11.custom.css" rel="stylesheet" />
	<script type="text/javascript" src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.5.1.min.js"></script>
	<script type="text/javascript" src="js/jquery-ui-1.8.11.custom.min.js"></script>
	<script type="text/javascript">
		$(function () {
			// Dialog			
			$('#dialog').dialog({
				autoOpen: false,
				modal: true,
				width: 600,
				buttons: {
					"Ok": function () {
						$(this).dialog("close");
					},
					"Cancel": function () {
						$(this).dialog("close");
					}
				}
			});

			// Dialog Link
			$('#dialog_link').click(function () {
				$('#dialog').dialog('open');
				return false;
			});

			//hover states on the static widgets
			$('#dialog_link, ul#icons li').hover(
					function () { $(this).addClass('ui-state-hover'); },
					function () { $(this).removeClass('ui-state-hover'); }
				);

		});
	</script>
	<style type="text/css">
		/*demo page css*/
		.demoHeaders
		{
			margin-top: 2em;
		}
		#dialog_link
		{
			padding: .4em 1em .4em 20px;
			text-decoration: none;
			position: relative;
		}
		#dialog_link span.ui-icon
		{
			margin: 0 5px 0 0;
			position: absolute;
			left: .2em;
			top: 50%;
			margin-top: -8px;
		}
	</style>
</asp:Content>
<asp:Content ID="Content2" ContentPlaceHolderID="ContentPlaceHolder1" runat="Server">
	<h1>
		An example of Typps HTML Editor using the Jquery UI dialog</h1>
		<br style="clear:both"/>
	<p>
		<a href="#" id="dialog_link" class="ui-state-default ui-corner-all"><span class="ui-icon ui-icon-newwin">
		</span>Open Dialog</a></p>
	<div id="dialog" title="Dialog Title">
	<div>
		<t:editor id="Editor1" IconsMode="ImageSprites" runat="server">
			<EmbeddedImagePicker ID="ImagePicker1"
				ImageUploadEnabled="false"
				OnBrowseServerRequest="ImagePicker_BrowseServerRequest" runat="server">
			</EmbeddedImagePicker>
		</t:editor>
	</div>
	</div>
</asp:Content>
